<template>
  <!--  -->
  <layout title="个人资料" background="#fff">
    <view class="info">
      <view class="info-head">
        <image
          :src="head || getImgSrc('/identity/img_succeed@2x.png')"
          mode="aspectFill"
        ></image>
        <text class="info-head-text" @tap="triggerToReplaceHead">更换头像</text>
      </view>
      <u-form class="form" labelPosition="top" :model="info" ref="form1">
        <u-form-item label="姓名" borderBottom>
          <view class="form-item-value">{{ info.name || "-" }}</view>
        </u-form-item>
        <u-form-item label="等级" borderBottom>
          <view class="form-item-value">{{ info.levelName || "-" }}</view>
        </u-form-item>
        <u-form-item label="绑定手机号" borderBottom right-icon="arrow-right">
          <view class="form-item-value">{{ info.phone || "-" }}</view>
          <view class="form-item-tip" @tap="triggerToBindPhone">
            更换
          </view>
        </u-form-item>
        <u-form-item label="绑定微信号" borderBottom right-icon="arrow-right">
          <view class="form-item-value">{{ info.wx || "-" }}</view>
          <view class="form-item-tip" v-if="!info.wx" @tap="triggerToLoginByWxLogin"> 绑定 </view>
        </u-form-item>
        <u-form-item label="用户id" borderBottom>
          <view class="form-item-value">{{ info.id }}</view>
        </u-form-item>
        <u-form-item label="工作校区" borderBottom>
          <view class="form-item-value">{{ info.school }}</view>
        </u-form-item>
        <u-form-item label="紧急联系人1" borderBottom>
          <view class="form-item-value">{{ info.tel1 }}</view>
        </u-form-item>
        <u-form-item label="紧急联系人2" borderBottom>
          <view class="form-item-value">{{ info.tel2 }}</view>
        </u-form-item>
      </u-form>
    </view>
  </layout>
</template>
<script>
import { readImg, compressImg } from "@/common/minizerImg.js";

export default {
  name: "runner-info",
  data() {
    return {
      nameModifyModalShow: false,
      head: "",
      info: {
        name: "",
        nickName: "",
        phone: "",
        wx: "",
        id: "",
        school: "",
        levelName: "",
        tel1: "",
        tel2: "",
      },
    };
  },
  computed: {
    uploadUrl() {
      return this.vuex_config.adminPath + "/applet/oss/upload";
    },
  },
  onLoad(option) {
    this.getData();
    const _this = this;
    this.$bridge.registerHandler(
      "triggerToLoginByWxAccess",
      (data, responseCallback) => {
        responseCallback(data);
        _this.data = data;
        (async function () {
          try {
            data = JSON.parse(data);
          } catch (err) {
            // _data = data;
          }
          _this.bind(data.code);
        })();
      }
    );
  },
  onShow() {},
  onReady() {},
  watch: {},
  methods: {
    triggerToBindPhone() {
      uni.navigateTo({
        url: "/pages/sys/login/inputPhone?type=replace",
      });
    },
    bind(code) {
      const _this = this;
      this.$u.api
        .wxBind({
          code,
        })
        .then(async (res) => {
          if (res.status === 0) {
            uni.showToast({ title: "操作成功", icon: "none" });
            const { data } = await _this.$u.api.getUserMes();
            _this.$u.vuex("vuex_user", data);
            _this.getData();
            return;
          }
          uni.showToast({ title: res.message, icon: "none" });
        });
    },
    triggerToLoginByWxLogin() {
      this.$bridge.callHandler(
        "triggerToLoginWithWxAccess",
        JSON.stringify({}),
        (args) => {}
      );
    },
    async updateInfo() {
      await this.$u.api.updateRunnerMes({
        head: this.head,
      });
      await new Promise((r) => setTimeout(r, 500));
      this.getData();
    },
    chooseImage: () => {
      return new Promise((res, rej) => {
        uni.chooseImage({
          count: 1,
          sizeType: "original",
          success: (e) => {
            res({
              imageList: e.tempFilePaths,
              imageFiles: e.tempFiles,
            });
          },
          fail: () => {
            uni.showToast({
              title: "选择图片失败，请确认权限",
            });
          },
        });
      });
    },
    async compress(file) {
      const img = await readImg(file);
      const blob = await compressImg(img, file.type, 1000, 1000);
      return blob;
    },
    async triggerToReplaceHead() {
      const { imageFiles } = await this.chooseImage();
      uni.uploadFile({
        url: this.vuex_config.baseUrl + "/applet/oss/upload",
        file: await this.compress(imageFiles[0]),
        header: {
          Authorization: this.vuex_tokenHead + this.vuex_token,
        },
        name: "file",
        formData: {
          type: "IMG_GOOD_PHOTO",
        },
        success: (res) => {
          const data = JSON.parse(res.data);
          this.head = data.data;
          this.updateInfo();
        },
        fail: (err) => {
          console.log("上传失败");
        },
        complete: console.log,
      });
    },
    getData() {
      this.$u.api.getRunnerInfo().then((res) => {
        this.info.name = res.data.username;
        this.info.phone = res.data.mobile;
        this.info.levelName = res.data.levelName;
        this.head = res.data.head;
        this.info.id = res.data.id;
        this.info.wx = res.data.openId || this.vuex_user.openId;
        this.info.school = res.data.schoolName || "-";
        this.info.tel1 = res.data.tel1 || "-";
        this.info.tel2 = res.data.tel2 || "-";
      });
    },
  },
};
</script>
<style lang="scss">
.info {
  background: #fff;

  .info-head {
    margin: 39rpx auto 16rpx;
    width: 230rpx;
    height: 230rpx;
    border-radius: 50%;
    overflow: hidden;
    position: relative;
    &-text {
      background: rgba(0, 0, 0, 0.3);
      position: absolute;
      bottom: 0rpx;
      padding: 12rpx 0 16rpx 0;
      left: 0;
      width: 100%;
      text-align: center;
      font-size: 28rpx;
      font-family: PingFang SC;
      font-weight: 400;
      color: #ffffff;
      line-height: 36rpx;
    }
    image {
      width: 100%;
      height: 100%;
    }
  }
  .form {
    padding: 0 30rpx;
    /deep/.u-form-item {
      padding: 34rpx 0 38rpx;
    }
    .form-item-value {
      flex: 1;
      padding-top: 9rpx;
      font-size: 32rpx;
      font-family: PingFang SC;
      font-weight: 400;
      color: #282828;
      line-height: 36rpx;
    }
    .form-item-tip {
      font-size: 30rpx;
      font-family: PingFang SC;
      font-weight: 400;
      color: #b5b5b5;
      line-height: 36rpx;
    }
  }
  /deep/.u-form-item--left__content__label {
    font-size: 26rpx;
    font-family: PingFang SC;
    font-weight: 400;
    color: #b5b5b5;
    line-height: 36rpx;
  }
}

.score-modal {
  width: 600rpx;
  padding-bottom: 60rpx;
  background: #ffffff;
  border-radius: 20rpx;
  position: relative;
  text-align: center;

  &-icon {
    position: absolute;
    height: 37rpx;
    width: 36rpx;
    right: 38rpx;
    top: 40rpx;
  }

  &-head {
    font-size: 32rpx;
    font-family: PingFang SC;
    font-weight: 600;
    color: #4b4b4b;
    line-height: 40rpx;
    margin-bottom: 60rpx;
    padding-top: 57rpx;
  }

  &-input {
    text-align: left;
    padding: 22rpx 21rpx;
    box-sizing: border-box;
    width: 491rpx;
    height: 141rpx;
    background: #ffffff;
    border: 1rpx solid #d4d4d4;
    border-radius: 10px;
    margin: 0 auto;
    font-size: 28rpx;
    font-family: PingFang SC;
    font-weight: 400;
    color: #333333;
    line-height: 28rpx;
  }
  &-btn {
    margin: 63rpx auto 0;
    width: 280rpx;
    height: 80rpx;
    background: linear-gradient(90deg, #4aabf6, #4675f6);
    box-shadow: 0rpx 16rpx 30rpx 0rpx rgba(74, 169, 246, 0.2);
    border-radius: 40rpx;
    font-size: 34rpx;
    font-family: PingFang SC;
    font-weight: 400;
    line-height: 80rpx;
    color: #ffffff;
  }
}
</style>
